<template>
<transition name="fade">
  <div class="login" v-show="show">
      <div v-title data-title="login"></div>
      <div class="head-logo"><img src="../../assets/logo.png" /></div>
      <div class="login-box">
          <form>
              <div class="item">
                  <i class="icon iconfont icon-account"></i>
                  <input type="text" placeholder="手机号/用户名"/>
              </div>
              <div class="item">
                  <i class="icon iconfont icon-password"></i>
                  <input type="text" placeholder="密码"/>
              </div>
              <div class="mt">
                  <button class="log-button">登录</button>
                  <p>
                      <router-link to="/register" class="left">注册</router-link>
                      <router-link to="/forget" class="right">忘记密码</router-link>
                  </p>
              </div>
          </form>
        
      </div>
      <div class="other-login">
          <p></p>
          <em>其他方式登录</em>
          <div class="login-logo">
              <img src="http://m.upinkji.com/static/images/qq.png" />
               <img src="http://m.upinkji.com/static/images/qq.png" />
          </div>
      </div>
  </div>
</transition>
</template>
<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
html, body{background: #fff!important;}
.login{  height: 100%;  width: 100%;  overflow: hidden; background: #fff;
&.fade-enter-active, &.fade-leave-active{
    transition: transform .4s;
    opacity: 1;
}
  &.fade-enter, &.fade-leave-active{
    transform: translate3d( 0,100%, 0);
    opacity: 1;
    }
}
</style>

